import SearchBar from "@/components/common/SearchBar";
import NavBar from "@/components/menus/NavBar";
import { ScrollView, View } from "@tarojs/components";
import { useState } from "react";
import {
  EyeOutlined,
  ClosedEye,
  DeleteOutlined,
  ArrowLeft,
} from "@taroify/icons";
import { Empty, Image } from "@taroify/core";
import Taro, { useLoad } from "@tarojs/taro";
import Collapse from "@/components/common/Collapse";
import { RenderTagList } from "@/utils/render";
import {
  cleanUserHistorySearchApi,
  getUserHistorySearchApi,
  searchPostInfosApi,
} from "@/api";
import { getUser } from "@/utils/auth";
import { ResponseListType } from "@/types/response";
import SelectDown from "@/components/common/SelectDown";

export default () => {
  const user = getUser();
  const [search, setSearch] = useState("");
  const [show, setShow] = useState(true);
  const [showSearch, setShowSearch] = useState(false);
  const [history, setHistory] = useState<Array<any>>([]);
  const [type, setType] = useState("1");
  const [list, setList] = useState<Array<any>>([]);
  const pager = {
    pageNum: 0,
    pageSize: 10,
  };
  function getSearch() {
    user.kid &&
      getUserHistorySearchApi(user.kid).then((res: any) => {
        setHistory(res ?? []);
      });
  }
  useLoad(() => getSearch());
  function searchInfo() {
    pager.pageNum++;
    searchPostInfosApi({ ...pager, search, type, userId: user.kid }).then(
      (res: ResponseListType) => {
        setList(res.records);
        setShowSearch(true);
      }
    );
  }
  return (
    <NavBar
      left={
        <View className="flex gap-1 items-center text-xs">
          <ArrowLeft onClick={() => Taro.navigateBack()} size={24} />
          <SelectDown
            menus={[
              { id: "1", label: "搜帖" },
              { id: "2", label: "搜板块" },
              { id: "3", label: "搜人" },
            ]}
            current={type}
            select={setType}
          />
        </View>
      }
      title={<SearchBar change={setSearch} confirm={searchInfo} />}
    >
      {showSearch ? (
        <View>
          {list.length > 0 ? (
            <></>
          ) : (
            <Empty>
              <Empty.Image />
              <Empty.Description>未找到相关信息</Empty.Description>
            </Empty>
          )}
        </View>
      ) : (
        <View className="px-4 mt-2">
          <View className="flex justify-between">
            <View>快捷访问</View>
            <View onClick={() => setShow(!show)}>
              {show ? <EyeOutlined /> : <ClosedEye />}
            </View>
          </View>
          {show && (
            <ScrollView
              scrollX
              className="pl-3 overflow-x-auto whitespace-nowrap"
            >
              <View
                onClick={() => Taro.navigateTo({ url: "/pages/bar/info" })}
                className="p-3 flex-col inline-flex justify-center items-center"
              >
                <Image
                  width={100}
                  height={100}
                  src="https://joesch.moe/api/v1/random"
                />
                <View className="w-14 truncate">阴阳师带感吧</View>
              </View>
            </ScrollView>
          )}
          {history.length > 0 && (
            <Collapse
              title="搜索历史"
              extra={
                <View className="flex mr-3 gap-4 items-center text-[#A5A5A5]">
                  <DeleteOutlined
                    onClick={() =>
                      Taro.showModal({
                        title: "删除搜索记录",
                        content: "确定删除历史记录吗？！该操作无法撤回",
                        success: function (res) {
                          if (res.confirm) {
                            cleanUserHistorySearchApi(user.kid).then(() =>
                              setHistory([])
                            );
                          }
                        },
                      })
                    }
                    size={22}
                  />
                  <View>|</View>
                </View>
              }
              content={
                <View className="">
                  {RenderTagList({
                    tags: [
                      { id: 1, label: "鸳鸯戏" },
                      { id: 2, label: "yy" },
                      { id: 3, label: "黄昏的路灯照不亮完整的xxxx" },
                      { id: 4, label: "逃跑系列" },
                      { id: 5, label: "鸳鸯戏" },
                      { id: 6, label: "yy" },
                      { id: 7, label: "黄昏的路灯照不亮完整的xxxx" },
                      { id: 8, label: "逃跑系列" },
                      { id: 9, label: "鸳鸯戏" },
                      { id: 10, label: "yy" },
                      { id: 11, label: "黄昏的路灯照不亮完整的xxxx" },
                      { id: 12, label: "逃跑系列" },
                      { id: 13, label: "鸳鸯戏" },
                      { id: 14, label: "yy" },
                      { id: 15, label: "黄昏的路灯照不亮完整的xxxx" },
                      { id: 16, label: "逃跑系列" },
                    ],
                  })}
                </View>
              }
            >
              {RenderTagList({
                tags: [
                  { id: 1, label: "鸳鸯戏" },
                  { id: 2, label: "yy" },
                  { id: 3, label: "黄昏的路灯照不亮完整的xxxx" },
                  { id: 4, label: "逃跑系列" },
                  { id: 5, label: "鸳鸯戏" },
                  { id: 6, label: "yy" },
                  { id: 7, label: "黄昏的路灯照不亮完整的xxxx" },
                  { id: 8, label: "逃跑系列" },
                  { id: 9, label: "鸳鸯戏" },
                  { id: 10, label: "yy" },
                  { id: 11, label: "黄昏的路灯照不亮完整的xxxx" },
                  { id: 12, label: "逃跑系列" },
                  { id: 13, label: "鸳鸯戏" },
                  { id: 14, label: "yy" },
                  { id: 15, label: "黄昏的路灯照不亮完整的xxxx" },
                  { id: 16, label: "逃跑系列" },
                ],
                show: true,
              })}
            </Collapse>
          )}
        </View>
      )}
    </NavBar>
  );
};
